<script setup>
  import { ref } from 'vue'
  import loginForm from "@/components/login/loginForm.vue";
  import resForm from "@/components/login/resForm.vue";
  const element = ref(true)
  const changeForm = () => {
    element.value = !element.value
  }
</script>

<template>
  <el-container>
    <div class="login-main">
      <div class="form-main">
        <el-button @click="changeForm">登录</el-button>
        <el-button @click="changeForm">注册</el-button>
        <div v-if="element">
          <loginForm></loginForm>
        </div>
        <div v-else>
          <resForm></resForm>
        </div>
      </div>
    </div>
  </el-container>
</template>

<style lang="scss" scoped>
.login-main{

  position: relative;
}
.form-main{
  position: absolute;
  width: min(210px);
  height: 360px;
}
</style>